<template>
    <el-row class="main">
        <el-col class="padd20 posa">
    <div class="container">
       <el-container>
         <el-header>
             <div class="header">
                 <div class="left">
                     <el-badge :value="$store.state.msgcnt" :max="99" class="item">
                     系统通知
                     </el-badge>
                 </div>
                 <div class="right" v-if="qiehua==false" @click="readall">
                     全部已读
                 </div>
             </div>
         </el-header>
         <el-main style="padding: 0 20px;">
             <div class="main" v-for="(item,index) in page.list" :key="item.id" >
                 <div class="main-float">
                        <div class="imgstyle">
                         <img src="../../../static/img/xiaoxi.png" >
                        </div>
                      <div class="main-right">
                            <i class="dian" v-if="item.isread==0"></i>
                            <div class="main-top">
                             {{item.title}}
                             </div>
                             <div class="main-center"  @click="closeid" v-if="show==item.id">
                                      <div id="">
                                         {{item.content}}
                                      </div>
                             </div>
                             <span class="main-bot">
                                 {{item.createtime | dateFormat}}
                             </span>
                             <div @click="openid(item.id)" class="kan" v-if="show!=item.id">详情</div>
                       </div>
                       <div class="xuan">
                       </div>
                 </div>
             </div>
             <el-col class="box box-pack-center">
                 <el-empty description="暂无记录" :image-size="100" v-if="page.list.length==0"></el-empty>
             </el-col>
              
         </el-main>
       </el-container>
    </div>
        </el-col>
    </el-row>
</template>

<script>
    import menu from '../menus.vue'
    import moment from "moment"; //格式化时间插件引入
    export default {
        data() {
            return {
                qiehua:false,
                badge:'',
                show:'',
                page:{
                    list:[]
                },
                info:this.$store.state.loginInfo,
                user:this.$store.state.loginInfo.user,
            }
        },
        mounted() {
            this.getdata();
        },
        filters: {
        	dateFormat: function(e1) {
        		return moment(e1).format("YYYY-MM-DD HH:mm:ss");
        	}
        },
        methods:{
            getmsgcnt(){
                this.$ajax.post('/ymsg/getmsgcnt',{userid:this.user.id}).then(res=>{
                 this.$store.state.msgcnt=res.cnt;
                });
            },
            getdata(pageNum){
              this.$ajax.post('/ymsg/pagelist',{userid:this.user.id,pageSize:5,pageNum:pageNum}).then(res=>{
                  this.page=res.page;
                  this.getmsgcnt();
                  console.log(this.page)
              })
            },
            readall(){
                this.$store.state.msgcnt=0;
                this.$ajax.post('/ymsg/readall',{userid:this.user.id}).then(res=>{})
            },
            openid(id){
                this.show=id;
                this.$ajax.post('/ymsg/read',{id:id}).then(res=>{
                    this.getdata();
                })
            },
            closeid(){
                this.show=!this.show;
            }
        }
    }
</script>

<style scoped lang="scss">
    .xuan{
        line-height: 80px;
        width:100px;
        min-height:80px;
        height:auto !important;
        height:80px;
        overflow:hidden !important;
        overflow: visible;
    }
   /deep/ .el-badge__content.is-fixed{
        top:30px;
        right:5px;
    }
    .item {
       width: 72px;
      margin-right: 40px;
    }
    .contain[data-v-fbe2b96c] .el-header{
        border-bottom:0 !important;
        background-color: #fffff;
    }
    .header{
        // width: 1200px;
        height: 59px;
        line-height: 59px;
        background: #F6FAFF;
        border: 1px solid #E4ECF4;
        border-radius: 12px 12px 0px 0px;
        display: flex;
        justify-content: space-between;
        >.left{
            margin-left: 20px;
            width: 72px;
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #626BF1;
        }
        >.right{
       margin-right: 33px;
        width: 90px;
        height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        &:hover{
            color: #626BF1;
        }
        cursor: pointer;
        }
    }
    // .main{
    //     margin: 10px 0;
    // }
    .dian{
        position: absolute;
        top:9px;
        left:4px;
        display: block;
        width: 6px;
        height: 6px;
        background: linear-gradient(-3deg, #FA5151, #FC7088);
        border-radius: 50%;
    }
    .main-float{
        //随着数据量的增加而使div高度变化
        margin-bottom: 6px;
            min-height:90px;
            height:auto !important;
            height:90px;
            overflow:hidden !important;
            overflow: visible;
        // width:1200px;
        display: flex;
        border: 1px solid #E4ECF4;
        >.imgstyle{
            margin-top: 18px;
            margin-left: 18px;
            width:47px;
            height:37px;
            >img{
                width:100%;
                height: 100%;
            }
        }
        >.main-right{
            padding-bottom: 25px;
            width:1463px;
             margin-top: 18px;
            position: relative;
            overflow: hidden;
           >.main-top{
               text-align: left;
               padding-left: 12px;
               margin-left: 10px;
               width: 330px;
               height: 16px;
               font-size: 16px;
               font-family: Source Han Sans CN;
               font-weight: 400;
               color: #2F3142;
           }
           >.main-center{
               text-align: left;
               padding-left: 12px;
               margin-top: 10px;
               font-size: 14px;
               font-family: Source Han Sans CN;
               font-weight: 300;
               color: #5F6572;
               >.main-center-word{

               }
           }
           >.kan{
             margin-top: 10px;
              float: left;
              width: 80px;
              height: 20px;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 300;
              color: #626BF1;
              cursor: pointer;
           }
           >.main-bot{
               float:left;
               margin-top: 10px;
               display:block;
               width: 128px;
               height: 15px;
               font-size: 12px;
               font-family: Source Han Sans CN;
               font-weight: 300;
               color: #474b53;
               margin-left: 12px;

           }
        }
    }

    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;


    }
</style>
